<template>
  <div>
    <!-- 搜索框 -->
    <van-search
    v-model="searchValue"
     shape="round"
     clearable
     placeholder="请输入搜索关键词"
     @search="searchData(searchValue)" />
    <van-divider />
    <!-- 热门搜索/搜索结果 -->
    <router-view></router-view>
  </div>
</template>

<script>
// 导入vuex映射
// import { mapMutations } from 'vuex'
export default {
  name: 'Search-index',
  computed: {
    searchValue: {
      get () {
        return this.$store.state.searchValue
      },
      set (value) {
        this.$store.commit('CHANG_SEARCH', value)
      }
    }
  },
  methods: {
    searchData (value) {
      this.$store.dispatch('changSearch', value)
      this.$router.push('/layout/search/songlist')
    }
  },
  watch: {
    searchValue (value) {
      // 搜索框内容改变发送请求查询
      if (!value) {
        this.$router.push('/layout/search/hotsearch')
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-field__control{
  // 改变搜索框字体大小
  font-size: 14px;
}
</style>
